<template>
    <div class="sdy-home-goods-list"> 
        <!-- 使用vant里的list组件 -->
        <!-- 如果需要下拉刷新，包裹该标签 -->
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
                class="goods-list-box"
                v-model:loading="loading"
                :finished="finished"
                finished-text="没有更多了"
                :offset="100"
                @load="loadGoodsListHandler"
                >
                <!-- <van-cell v-for="item in goodsList" :key="item.proid" :title="item.proname" /> -->
                <div
                class="goods-item"
                v-for="item in goodsList"
                :key="item.proid">
                
                <img :src="item.img1" alt="">
                
                <p class="title" van-multi-ellipsis--l2>
                    {{ item.proname }}
                </p>
                <p class="price">
                    <span class="current">
                      ￥  {{ item.issale ? (item.originprice *10 / item.discount).toFixed(2) : item.originprice.toFixed(2) }}
                    </span>
                    <span class="old">
                      ￥  {{ item.originprice.toFixed(2)}}
                    </span>
                </p>
                <p class="tags">
                    <van-tag type="danger">{{item.category}}</van-tag>
                    <van-tag type="primary">{{item.brand}}</van-tag>
                </p>
                
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
//倒入相关请求接口
import { goodsListApi } from '@/api/goods'

//导入ts相关接口
import type { MyHotItem } from '@/config/interface'

//准备列表控制变量
//当你需要加载的时候，你直接加载即可，不需要操作该数据
//加载数据的时候，会自动把loading设置为true
//当你加载完毕以后，把loading修改为false即可
const loading = ref<boolean>(false)
// 当你没有更多数据的时候，把该数据的值变成 true，不会再次加载了
const finished = ref<boolean>(false)

//准备一个变量，表示下拉刷新控制器
const refreshing = ref<boolean>(false)

//准备一个变量，存储商品列表数据
const goodsList = ref<MyHotItem[]>([])



//准备一个数据表示请求相关信息
const goodsInfo = reactive({ count: 1, limitNum: 10 })

//滚动到底部的时候处罚的事情
const loadGoodsListHandler = async () => {

    
    
    setTimeout(async () => {
        const res = await goodsListApi(goodsInfo)
        console.log(res)
        //注意：不能直接替换数组，而是要把本次的内容拼接在上一次的内容后面
        goodsList.value = [ ...goodsList.value, ...res.data ]
        //修改一下goodsInfo 内的count，为了下次加载的时候，可以变成第三页
        goodsInfo.count++
        //把加载完毕的状态修改为false
        loading.value = false
       
        //判断一下，如果res.data的length为空，那么不需要再次loading了
        if (!res.data.length) finished.value = true
    }, Math.random() * 1000 + 2000)   
}

//下拉刷新的时候执行的代码
const onRefresh = () => {
    setTimeout(async () => {
        console.log('我下拉了')
        //让当前页变成第一页(模拟一个2-7的随机数)
        goodsInfo.count = Math.floor(Math.random() * 5 + 2)
        //请求数据
        const res = await goodsListApi(goodsInfo)
        //需要本次完整替换
        goodsList.value = res.data
        //让当前页++
         goodsInfo.count++
        //让下拉刷新控制变量换成false
        refreshing.value = false
        //因为刷新以后可以重新加载了
        //为了避免拉到底以后，刷新以后没有第二页了
        finished.value = false
    }, Math.random() * 1000 + 2000)    
}

</script>

<style scoped lang="scss">
@import '@/styles/variable.scss';
    .sdy-home-goods-list {
        box-sizing: border-box;
        padding: 0 15px;

        .goods-list-box {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;

            .goods-item{
                width: 45%;
                border: 1px solid #333;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 5px;
                overflow: hidden;
                padding-bottom: 5px;

                > p {
                    margin: 0;
                }

                > img {
                    width: 170px;
                    height: 170px;
                    display: block;
                }

                > .title {
                    font-size: 12px;
                }
                
                > .price {
                    font-size: 12px;
                    // text-decoration: line-through;
                    color: #ccc;
                    display: flex;
                    justify-content: space-evenly;
                    width: 100%;

                    > .current {
                        font-size: 16px;
                        color: $globalColor;
                    }

                    > .old{
                        text-decoration: line-through;
                    }
                }

                > .tags {
                    display: flex;
                    justify-content: space-evenly;
                    width: 100%;
                }
            }
        }
    }
</style>